import React, { Component, PureComponent } from "react"
import PropTypes from "prop-types"
/**
 * 创建类组件
 *  + 创建一个构造函数（类），要求必须继承React.Component/PureComponent 这个类
 *      + 我们习惯于使用Class的方法创建类（推荐使用用方法）
 *      + 如果使用构造函数，需要通过原型链或则其他的方式进行继承（ES5)
 *  + 必须给当前类设置一个render方法，然后返回结构体（构建的视图）
 */

class Vote extends React.Component {
    static defaultProps = {
        num: 0,
    }

    static propTypes = {
        title: PropTypes.string.isRequired,
        num: PropTypes.number,
    }

    // constructor(props) {
    //     super(props)
    //     this.state = {}
    // }

    state = {
        supNum: 10,
        oppNum: 5,
    }

    UNSAFE_componentWillMount() {
        console.log("第一次渲染之前")
    }

    componentDidMount() {
        console.log("第一次渲染完毕")
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate", this.state, nextState)
        return true
    }

    UNSAFE_componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdate", this.state, nextState)
    }

    componentDidUpdate() {
        console.log("componentDidUpdate:组件更新完毕")
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        console.log("componentWillReceiveProps", this.props, nextProps)
    }

    render() {
        console.log("渲染")
        const { title } = this.props
        const { supNum, oppNum } = this.state
        return (
            <div className="vote-box">
                <div className="header">
                    <h2 className="title">{title}</h2>
                    <span>{supNum + oppNum}人</span>
                </div>
                <div className="main">
                    <p>支持人数：{supNum}人</p>
                    <p>反对人数：{oppNum}人</p>
                </div>
                <div className="footer">
                    <button
                        onClick={() => {
                            this.setState({
                                supNum: supNum + 1,
                            })
                        }}
                    >
                        支持
                    </button>
                    <button
                        onClick={() => {
                            this.state.oppNum--
                            this.forceUpdate()
                            console.log("opp", oppNum)
                        }}
                    >
                        反对
                    </button>
                </div>
            </div>
        )
    }
}

export default Vote
